<template>
	<view class="page-body">
		
		<!-- <painter @imgOK="onImgOk" @imgErr="onImgErr" v-if="isLoading"   widthPixels="750" :palette="palette" /> -->
	        <button type="default" @click="beginCanvas">开始绘图</button>
	        <!-- <image :src="canvasUrl" mode="widthFix"></image> -->
	        <mosowe-canvas-image 
	            ref="mosoweCanvasComponents" 
	            @canvasImage="_canvasImage" 
	            :lists="palette" 
	            height="300" 
	            width="300"
	            showPreview />
		<image mode="widthFix" style="width: 654rpx; height: 1000rpx;" :src="shareImg" />
	</view>
</template>

<script>
	// import painter from "@/components/painter/painter.vue";
	import mosoweCanvasImage from "@/components/mosoweCanvasImage/mosoweCanvasImage.vue";
	export default {
		components: {
			// painter
			mosoweCanvasImage
		},
		data() {
			return {
				userInfo: {},
				details: {},
				palette: {},
				isLoading: false,
				shareImg: '',
				customStyle:[
					
				],
				palette:{}
			}
		},
		onLoad(option) {
			try {
				this.userInfo = uni.getStorageSync('user_info')
			} catch (e) {
				console.log(e)
			}

			
		},
		created() {
			this.init()
		},
		methods: {
			init() {
				this.drawCanvas()
			},
			drawCanvas() {
				// const that = this;
				this.palette = {
					width: '750rpx',
					height: '1352rpx',
					background: '#ff3714',
					views: [

						{
							type: 'text',
							text: '老客户专项3成首付，2年0利率',
							css: {
								top: '54rpx',
								left: '260rpx',
								fontSize: '48rpx',
								color: "#000"
							}
						},
						// {
						// 	type: 'text',
						// 	text: that.userInfo.manuName + ' | ' + that.userInfo.roleName,
						// 	css: {
						// 		top: '134rpx',
						// 		left: '260rpx',
						// 		fontSize: '30rpx',
						// 		color: "#d1d1d1"
						// 	}
						// },
						// {
						// 	type: 'text',
						// 	text: that.formatPhone,
						// 	css: {
						// 		top: '196rpx',
						// 		left: '260rpx',
						// 		fontSize: '26rpx',
						// 		color: "#d1d1d1"
						// 	}
						// },
						// {
						// 	type: 'text',
						// 	text: that.userInfo.foursName,
						// 	css: {
						// 		top: '304rpx',
						// 		left: '302rpx',
						// 		fontSize: '24rpx',
						// 		color: "#767676"
						// 	}
						// },
						// {
						// 	type: 'image',
						// 	url: imageApi + '/icon-localtion.png',
						// 	css: {
						// 		top: '275rpx',
						// 		left: '260rpx',
						// 		width: '26rpx',
						// 		height: '168rpx'
						// 	}
						// },
						// {
						// 	type: 'image',
						// 	url: that.codeImg,
						// 	css: {
						// 		top: '646rpx',
						// 		left: '236rpx',
						// 		width: '278rpx',
						// 		height: '278rpx'
						// 	}
						// }
					]
				}		
				this.isLoading = true
			},
			onImgOk(e) {
				this.shareImg = e.detail.path
				this.isLoading = false
				console.log(e)
			},
			onImgErr(e) {
				this.isLoading = false
				console.log(e)
			}
		}
	}
</script>

<style scoped lang="scss">
</style>
